```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IM系统通信技术演进</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            background-color: #f8f9fa;
            color: #333;
            line-height: 1.6;
        }
        .hero {
            background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
            color: white;
        }
        .card {
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        }
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
        }
        .protocol-icon {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            color: #4f46e5;
        }
        .protocol-card {
            border-left: 4px solid;
        }
        .dropdown-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out;
        }
        .dropdown-toggle:checked ~ .dropdown-content {
            max-height: 1000px;
            transition: max-height 0.5s ease-in;
        }
        h1, h2, h3, h4 {
            font-family: 'Noto Serif SC', serif;
            font-weight: 600;
        }
        .timeline-item:before {
            content: '';
            position: absolute;
            left: -30px;
            top: 0;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: #4f46e5;
        }
    </style>
</head>
<body>
    <!-- Hero Section -->
    <header class="hero py-20 px-4 md:px-10 lg:px-20">
        <div class="container mx-auto max-w-5xl text-center">
            <h1 class="text-4xl md:text-5xl font-bold mb-6">IM系统通信技术演进</h1>
            <p class="text-xl md:text-2xl mb-8 opacity-90">从轮询到WebSocket：探索即时通讯技术的变革之路</p>
            <div class="flex justify-center space-x-4">
                <a href="#overview" class="px-6 py-3 bg-white text-indigo-700 rounded-full font-medium hover:bg-opacity-90 transition">技术概览</a>
                <a href="#comparison" class="px-6 py-3 bg-opacity-20 bg-white rounded-full font-medium hover:bg-opacity-30 transition">对比分析</a>
            </div>
        </div>
    </header>

    <!-- Overview Section -->
    <section id="overview" class="py-16 px-4 md:px-10 lg:px-20 bg-white">
        <div class="container mx-auto max-w-5xl">
            <h2 class="text-3xl font-bold mb-12 text-center">即时通讯技术发展历程</h2>
            
            <div class="relative">
                <!-- Timeline -->
                <div class="border-l-2 border-gray-200 pl-8 ml-4 space-y-16">
                    <div class="timeline-item relative">
                        <div class="bg-gray-50 p-6 rounded-lg shadow-sm">
                            <h3 class="text-xl font-bold mb-2">早期阶段：轮询技术</h3>
                            <p class="text-gray-600">2000年代初期，IM系统主要采用简单的轮询机制，客户端定期向服务器发送请求检查新消息。</p>
                        </div>
                    </div>
                    <div class="timeline-item relative">
                        <div class="bg-gray-50 p-6 rounded-lg shadow-sm">
                            <h3 class="text-xl font-bold mb-2">改进阶段：长轮询</h3>
                            <p class="text-gray-600">2000年代中期，长轮询技术出现，减少了延迟并提高了效率，但仍存在资源消耗问题。</p>
                        </div>
                    </div>
                    <div class="timeline-item relative">
                        <div class="bg-gray-50 p-6 rounded-lg shadow-sm">
                            <h3 class="text-xl font-bold mb-2">革命阶段：WebSocket</h3>
                            <p class="text-gray-600">2011年WebSocket成为正式标准，实现了真正的全双工通信，大幅提升了IM系统的实时性。</p>
                        </div>
                    </div>
                    <div class="timeline-item relative">
                        <div class="bg-gray-50 p-6 rounded-lg shadow-sm">
                            <h3 class="text-xl font-bold mb-2">多样化阶段：多协议共存</h3>
                            <p class="text-gray-600">现代IM系统根据需求选择合适协议，如SSE、XMPP、MQTT等，针对不同场景优化性能。</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Protocol Details Section -->
    <section class="py-16 px-4 md:px-10 lg:px-20 bg-gray-50">
        <div class="container mx-auto max-w-5xl">
            <h2 class="text-3xl font-bold mb-12 text-center">核心技术详解</h2>
            
            <div class="grid md:grid-cols-2 gap-8">
                <!-- 轮询 -->
                <div class="protocol-card border-indigo-200 bg-white rounded-lg p-8 shadow-sm">
                    <div class="flex items-center mb-4">
                        <i class="fas fa-sync-alt protocol-icon mr-4"></i>
                        <h3 class="text-2xl font-bold">轮询 (Polling)</h3>
                    </div>
                    <div class="space-y-4">
                        <div>
                            <h4 class="font-semibold text-gray-800 mb-1">定义</h4>
                            <p>客户端定期向服务器发送请求，检查是否有新的消息或数据需要获取。</p>
                        </div>
                        <div>
                            <h4 class="font-semibold text-gray-800 mb-1">工作原理</h4>
                            <p>客户端会以固定的时间间隔发送HTTP请求，询问服务器是否有新的消息。如果有，服务器会返回消息数据；如果没有，返回空响应。</p>
                        </div>
                        <div class="grid grid-cols-2 gap-4 mt-4">
                            <div class="bg-indigo-50 p-3 rounded">
                                <h5 class="font-medium text-indigo-700 mb-1">优点</h5>
                                <p class="text-sm">实现简单，服务器压力可控</p>
                            </div>
                            <div class="bg-red-50 p-3 rounded">
                                <h5 class="font-medium text-red-700 mb-1">缺点</h5>
                                <p class="text-sm">延迟较高，高频轮询增加服务器负载</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 长轮询 -->
                <div class="protocol-card border-blue-200 bg-white rounded-lg p-8 shadow-sm">
                    <div class="flex items-center mb-4">
                        <i class="fas fa-hourglass-half protocol-icon mr-4"></i>
                        <h3 class="text-2xl font-bold">长轮询 (Long Polling)</h3>
                    </div>
                    <div class="space-y-4">
                        <div>
                            <h4 class="font-semibold text-gray-800 mb-1">定义</h4>
                            <p>长轮询是一种改进的轮询方式，客户端发送请求后，服务器会在有新消息时才返回响应。</p>
                        </div>
                        <div>
                            <h4 class="font-semibold text-gray-800 mb-1">工作原理</h4>
                            <p>客户端发送HTTP请求到服务器，服务器保持该连接直到有新的消息可供客户端接收。服务器返回响应后，客户端立即发送下一个请求。</p>
                        </div>
                        <div class="grid grid-cols-2 gap-4 mt-4">
                            <div class="bg-blue-50 p-3 rounded">
                                <h5 class="font-medium text-blue-700 mb-1">优点</h5>
                                <p class="text-sm">比普通轮询减少了延迟，节省了资源</p>
                            </div>
                            <div class="bg-red-50 p-3 rounded">
                                <h5 class="font-medium text-red-700 mb-1">缺点</h5>
                                <p class="text-sm">服务器资源消耗较大，影响并发处理</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- WebSocket -->
                <div class="protocol-card border-purple-200 bg-white rounded-lg p-8 shadow-sm">
                    <div class="flex items-center mb-4">
                        <i class="fas fa-plug protocol-icon mr-4"></i>
                        <h3 class="text-2xl font-bold">WebSocket</h3>
                    </div>
                    <div class="space-y-4">
                        <div>
                            <h4 class="font-semibold text-gray-800 mb-1">定义</h4>
                            <p>WebSocket是一种基于TCP的协议，允许在客户端和服务器之间建立一个持久的双向通信通道。</p>
                        </div>
                        <div>
                            <h4 class="font-semibold text-gray-800 mb-1">工作原理</h4>
                            <p>客户端和服务器之间建立一个WebSocket连接后，可以在不关闭连接的情况下，双向传输数据。服务器可以主动向客户端推送消息。</p>
                        </div>
                        <div class="grid grid-cols-2 gap-4 mt-4">
                            <div class="bg-purple-50 p-3 rounded">
                                <h5 class="font-medium text-purple-700 mb-1">优点</h5>
                                <p class="text-sm">低延迟、实时性强，效率更高</p>
                            </div>
                            <div class="bg-red-50 p-3 rounded">
                                <h5 class="font-medium text-red-700 mb-1">缺点</h5>
                                <p class="text-sm">需要服务器和客户端都支持WebSocket</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- SSE -->
                <div class="protocol-card border-green-200 bg-white rounded-lg p-8 shadow-sm">
                    <div class="flex items-center mb-4">
                        <i class="fas fa-arrow-down protocol-icon mr-4"></i>
                        <h3 class="text-2xl font-bold">服务器推送 (SSE)</h3>
                    </div>
                    <div class="space-y-4">
                        <div>
                            <h4 class="font-semibold text-gray-800 mb-1">定义</h4>
                            <p>SSE是HTML5标准中的一种服务器推送技术，允许服务器通过单向HTTP连接持续向客户端发送数据。</p>
                        </div>
                        <div>
                            <h4 class="font-semibold text-gray-800 mb-1">工作原理</h4>
                            <p>客户端通过一个HTTP连接向服务器发送请求，服务器保持该连接，并在有数据时通过该连接向客户端推送消息。</p>
                        </div>
                        <div class="grid grid-cols-2 gap-4 mt-4">
                            <div class="bg-green-50 p-3 rounded">
                                <h5 class="font-medium text-green-700 mb-1">优点</h5>
                                <p class="text-sm">实现简单，基于HTTP协议，兼容性好</p>
                            </div>
                            <div class="bg-red-50 p-3 rounded">
                                <h5 class="font-medium text-red-700 mb-1">缺点</h5>
                                <p class="text-sm">只支持服务器单向推送，功能较为单一</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- XMPP -->
                <div class="protocol-card border-yellow-200 bg-white rounded-lg p-8 shadow-sm">
                    <div class="flex items-center mb-4">
                        <i class="fas fa-comments protocol-icon mr-4"></i>
                        <h3 class="text-2xl font-bold">XMPP</h3>
                    </div>
                    <div class="space-y-4">
                        <div>
                            <h4 class="font-semibold text-gray-800 mb-1">定义</h4>
                            <p>XMPP是一种基于XML的协议，用于实现消息的交换和用户在线状态的管理。</p>
                        </div>
                        <div>
                            <h4 class="font-semibold text-gray-800 mb-1">工作原理</h4>
                            <p>XMPP采用客户端/服务器架构，客户端通过TCP连接到XMPP服务器，发送和接收XML格式的消息。</p>
                        </div>
                        <div class="grid grid-cols-2 gap-4 mt-4">
                            <div class="bg-yellow-50 p-3 rounded">
                                <h5 class="font-medium text-yellow-700 mb-1">优点</h5>
                                <p class="text-sm">成熟协议，扩展性强，支持分布式架构</p>
                            </div>
                            <div class="bg-red-50 p-3 rounded">
                                <h5 class="font-medium text-red-700 mb-1">缺点</h5>
                                <p class="text-sm">数据冗余大，实现复杂</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- MQTT -->
                <div class="protocol-card border-red-200 bg-white rounded-lg p-8 shadow-sm">
                    <div class="flex items-center mb-4">
                        <i class="fas fa-network-wired protocol-icon mr-4"></i>
                        <h3 class="text-2xl font-bold">MQTT</h3>
                    </div>
                    <div class="space-y-4">
                        <div>
                            <h4 class="font-semibold text-gray-800 mb-1">定义</h4>
                            <p>MQTT是一种轻量级的消息协议，适用于低带宽、不稳定网络环境的设备通信。</p>
                        </div>
                        <div>
                            <h4 class="font-semibold text-gray-800 mb-1">工作原理</h4>
                            <p>MQTT采用发布/订阅模式，客户端向消息代理发布消息或订阅主题，Broker负责将消息分发给订阅相应主题的客户端。</p>
                        </div>
                        <div class="grid grid-cols-2 gap-4 mt-4">
                            <div class="bg-red-50 p-3 rounded">
                                <h5 class="font-medium text-red-700 mb-1">优点</h5>
                                <p class="text-sm">轻量级，开销小，支持QoS保证</p>
                            </div>
                            <div class="bg-red-50 p-3 rounded">
                                <h5 class="font-medium text-red-700 mb-1">缺点</h5>
                                <p class="text-sm">功能有限，适合简单消息传输</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Comparison Section -->
    <section id="comparison" class="py-16 px-4 md:px-10 lg:px-20 bg-white">
        <div class="container mx-auto max-w-5xl">
            <h2 class="text-3xl font-bold mb-12 text-center">技术对比分析</h2>
            
            <!-- Mermaid Diagram -->
            <div class="mermaid bg-gray-50 p-6 rounded-lg shadow-sm mb-12">
                graph TD
                    A[IM通信技术] --> B[轮询]
                    A --> C[长轮询]
                    A --> D[WebSocket]
                    A --> E[SSE]
                    A --> F[XMPP]
                    A --> G[MQTT]
                    
                    B --> H[简单实现]
                    B --> I[高延迟]
                    
                    C --> J[减少延迟]
                    C --> K[占用连接]
                    
                    D --> L[全双工]
                    D --> M[低延迟]
                    
                    E --> N[服务器推送]
                    E --> O[单向]
                    
                    F --> P[复杂协议]
                    F --> Q[扩展性强]
                    
                    G --> R[轻量级]
                    G --> S[发布订阅]
            </div>
            
            <!-- Features Comparison Table -->
            <div class="overflow-x-auto">
                <table class="min-w-full bg-white rounded-lg overflow-hidden shadow-sm">
                    <thead class="bg-indigo-600 text-white">
                        <tr>
                            <th class="py-3 px-4 text-left">技术</th>
                            <th class="py-3 px-4 text-left">实时性</th>
                            <th class="py-3 px-4 text-left">复杂度</th>
                            <th class="py-3 px-4 text-left">资源消耗</th>
                            <th class="py-3 px-4 text-left">双向通信</th>
                            <th class="py-3 px-4 text-left">典型应用</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        <tr class="hover:bg-gray-50">
                            <td class="py-3 px-4 font-medium">轮询</td>
                            <td class="py-3 px-4">低</td>
                            <td class="py-3 px-4">简单</td>
                            <td class="py-3 px-4">高（频繁请求）</td>
                            <td class="py-3 px-4">否</td>
                            <td class="py-3 px-4">简单消息通知</td>
                        </tr>
                        <tr class="hover:bg-gray-50">
                            <td class="py-3 px-4 font-medium">长轮询</td>
                            <td class="py-3 px-4">中</td>
                            <td class="py-3 px-4">中等</td>
                            <td class="py-3 px-4">中（连接占用）</td>
                            <td class="py-3 px-4">否</td>
                            <td class="py-3 px-4">早期IM系统</td>
                        </tr>
                        <tr class="hover:bg-gray-50">
                            <td class="py-3 px-4 font-medium">WebSocket</td>
                            <td class="py-3 px-4">高</td>
                            <td class="py-3 px-4">中等</td>
                            <td class="py-3 px-4">低（持久连接）</td>
                            <td class="py-3 px-4">是</td>
                            <td class="py-3 px-4">现代IM、游戏、实时应用</td>
                        </tr>
                        <tr class="hover:bg-gray-50">
                            <td class="py-3 px-4 font-medium">SSE</td>
                            <td class="py-3 px-4">中高</td>
                            <td class="py-3 px-4">简单</td>
                            <td class="py-3 px-4">低</td>
                            <td class="py-3 px-4">否</td>
                            <td class="py-3 px-4">新闻推送、实时通知</td>
                        </tr>
                        <tr class="hover:bg-gray-50">
                            <td class="py-3 px-4 font-medium">XMPP</td>
                            <td class="py-3 px-4">高</td>
                            <td class="py-3 px-4">复杂</td>
                            <td class="py-3 px-4">高</td>
                            <td class="py-3 px-4">是</td>
                            <td class="py-3 px-4">企业IM、大型系统</td>
                        </tr>
                        <tr class="hover:bg-gray-50">
                            <td class="py-3 px-4 font-medium">MQTT</td>
                            <td class="py-3 px-4">中</td>
                            <td class="py-3 px-4">中等</td>
                            <td class="py-3 px-4">极低</td>
                            <td class="py-3 px-4">是（通过Broker）</td>
                            <td class="py-3 px-4">物联网、移动设备</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </section>

    <!-- Selection Guide -->
    <section class="py-16 px-4 md:px-10 lg:px-20 bg-gray-50">
        <div class="container mx-auto max-w-5xl">
            <h2 class="text-3xl font-bold mb-8 text-center">技术选型指南</h2>
            
            <div class="bg-white p-8 rounded-lg shadow-sm">
                <div class="space-y-6">
                    <div class="dropdown">
                        <label class="dropdown-toggle cursor-pointer flex items-center justify-between">
                            <h3 class="text-xl font-semibold">需要全双工实时通信？</h3>
                            <i class="fas fa-chevron-down transition-transform"></i>
                        </label>
                        <input type="checkbox" class="hidden dropdown-toggle">
                        <div class="dropdown-content pl-4 pt-2">
                            <p class="text-gray-600 mb-4">如果你的应用需要客户端和服务器之间频繁的双向通信（如聊天应用、协同编辑等），WebSocket是最佳选择。</p>
                            <div class="bg-indigo-50 p-4 rounded">
                                <p class="font-medium text-indigo-700">推荐技术: <span class="font-bold">WebSocket</span></p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="dropdown">
                        <label class="dropdown-toggle cursor-pointer flex items-center justify-between">
                            <h3 class="text-xl font-semibold">只需要服务器推送？</h3>
                            <i class="fas fa-chevron-down transition-transform"></i>
                        </label>
                        <input type="checkbox" class="hidden dropdown-toggle">
                        <div class="dropdown-content pl-4 pt-2">
                            <p class="text-gray-600 mb-4">如果主要是服务器向客户端推送数据（如新闻更新、实时通知等），SSE是轻量级且实现简单的选择。</p>
                            <div class="bg-blue-50 p-4 rounded">
                                <p class="font-medium text-blue-700">推荐技术: <span class="font-bold">Server-Sent Events (SSE)</span></p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="dropdown">
                        <label class="dropdown-toggle cursor-pointer flex items-center justify-between">
                            <h3 class="text-xl font-semibold">资源受限环境？</h3>
                            <i class="fas fa-chevron-down transition-transform"></i>
                        </label>
                        <input type="checkbox" class="hidden dropdown-toggle">
                        <div class="dropdown-content pl-4 pt-2">
                            <p class="text-gray-600 mb-4">对于物联网设备或移动应用，带宽和电量受限的场景，MQTT的轻量级特性使其成为理想选择。</p>
                            <div class="bg-green-50 p-4 rounded">
                                <p class="font-medium text-green-700">推荐技术: <span class="font-bold">MQTT</span></p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="dropdown">
                        <label class="dropdown-toggle cursor-pointer flex items-center justify-between">
                            <h3 class="text-xl font-semibold">需要企业级功能？</h3>
                            <i class="fas fa-chevron-down transition-transform"></i>
                        </label>
                        <input type="checkbox" class="hidden dropdown-toggle">
                        <div class="dropdown-content pl-4 pt-2">
                            <p class="text-gray-600 mb-4">对于需要复杂消息路由、在线状态管理、分布式架构的企业级应用，XMPP提供了全面的解决方案。</p>
                            <div class="bg-purple-50 p-4 rounded">
                                <p class="font-medium text-purple-700">推荐技术: <span class="font-bold">XMPP</span></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-gray-900 text-white py-12 px-4">
        <div class="container mx-auto max-w-5xl">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <h3 class="text-xl font-bold mb-2">技术小馆</h3>
                    <p class="text-gray-400">探索技术前沿，分享知识精华</p>
                </div>
                <div>
                    <a href="http://www.yuque.com/jtostring" class="text-indigo-300 hover:text-white transition flex items-center">
                        <i class="fas fa-external-link-alt mr-2"></i>
                        <span>http://www.yuque.com/jtostring</span>
                    </a>
                </div>
            </div>
            <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500 text-sm">
                <p>© 2023 技术小馆. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <script>
        // Initialize Mermaid
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: false,
                htmlLabels: true,
                curve: 'basis'
            }
        });

        // Dropdown toggle functionality
        document.querySelectorAll('.dropdown-toggle').forEach(toggle => {
            toggle.addEventListener('change', function() {
                const icon = this.parentElement.querySelector('i');
                if (this.checked) {
                    icon.style.transform = 'rotate(180deg)';
                } else {
                    icon.style.transform = 'rotate(0deg)';
                }
            });
        });
    </script>
</body>
</html>
```